¡Hola! Hoy quiero compartir contigo un pequeño truco que me ha resultado muy útil en mis últimos proyectos web. Se trata de la lista de tags HTML una especie de “hoja de trucos” que te permite comprender mejor cómo funciona el código de una página web.
¿Qué son las tags HTML?
Imagina que estás construyendo una casa. Para ello necesitas ladrillos vigas ventanas puertas etc. En el mundo web las tags HTML son como esos ladrillos y vigas. Son los bloques de construcción básicos que te permiten crear la estructura y el contenido de una página web.
Las tags HTML son pequeñas etiquetas de código que se utilizan para indicar al navegador cómo debe mostrar el contenido de una página web. Por ejemplo la tag <p> se utiliza para crear un párrafo la tag <h1> para un título principal la tag <img> para insertar una imagen y así sucesivamente.
Cada tag HTML tiene una función específica y es importante conocerlas para poder crear páginas web bien estructuradas y funcionales.
Entendiendo las tags HTML: Una analogía
Piensa en una página web como un libro.
Las tags HTML son como las instrucciones para el impresor indicándole qué tipo de letra tamaño estilo y posición debe usar para cada párrafo título imagen etc.
Por ejemplo:
<p>: “Imprime este texto en un párrafo normal.”<h1>: “Imprime este texto como un título principal con un tamaño de letra grande y en negrita.”<img>: “Inserta esta imagen en esta posición.”
Tags HTML básicas: Los cimientos de tu página web
Hay algunas tags HTML básicas que son esenciales para crear cualquier página web.
Estas tags son como los cimientos de una casa: proporcionan la estructura fundamental para que el resto de la página funcione correctamente.
Las tags HTML “fundamentales”
<!DOCTYPE html>: Esta tag indica al navegador la versión de HTML que se está utilizando. Es como el título de un libro que te dice de qué tipo de libro se trata.<html>: Esta tag define el inicio y el final de la página web. Es como la portada y la contraportada del libro.<head>: Esta tag contiene información sobre la página web que no se muestra directamente en la página como el título la descripción o los estilos. Es como la página de derechos de autor de un libro.<title>: Esta tag define el título de la página web que es lo que se muestra en la pestaña del navegador. Es como el título del libro que se ve en la portada.<body>: Esta tag contiene el contenido principal de la página web que se muestra al usuario. Es como el contenido del libro en sí.
Otras tags esenciales
<h1>–<h6>: Estas tags se utilizan para definir los encabezados o títulos de diferentes niveles de jerarquía en la página web. Es como los títulos y subtítulos de un libro.<a>: Esta tag se utiliza para crear enlaces que permiten al usuario navegar a otras páginas web o a diferentes secciones de la misma página. Es como los enlaces internos de un libro.<img>: Esta tag se utiliza para insertar imágenes en la página web. Es como las ilustraciones de un libro.
Explorando el mundo de las tags HTML: Más allá de los básicos
Además de las tags básicas existen muchas otras tags HTML que te permiten crear páginas web más complejas y atractivas.
Aquí te dejo una selección de las tags HTML más comunes divididas en diferentes categorías:
Tags para formato de texto
<p>: Crea un párrafo.<h1>–<h6>: Crea encabezados de diferentes tamaños.<strong>: Muestra el texto en negrita.<em>: Muestra el texto en cursiva.<br>: Inserta un salto de línea.<hr>: Inserta una línea horizontal.
Tags para listas
<ul>: Crea una lista desordenada.<ol>: Crea una lista ordenada.<li>: Crea un elemento de la lista.
Tags para tablas
<table>: Crea una tabla.<tr>: Crea una fila de la tabla.<th>: Crea una celda de encabezado de la tabla.<td>: Crea una celda de datos de la tabla.
Tags para formularios
<form>: Crea un formulario.<input>: Crea un campo de entrada de datos.<button>: Crea un botón.<select>: Crea una lista desplegable.
Tags para multimedia
<img>: Inserta una imagen.<audio>: Inserta un archivo de audio.<video>: Inserta un archivo de video.
Revisando tu código HTML: Asegúrate de que tu web sea “perfecta”
Si ya has creado una página web es importante que compruebes si las tags HTML se están utilizando correctamente.
Para ello puedes utilizar el navegador web para ver el código HTML de tu página.
Para ver el código HTML de una página web puedes:
- Hacerte clic derecho en la página y seleccionar la opción “Ver código fuente”.
- Presionar la tecla F12 para abrir las herramientas de desarrollo del navegador.
Analizando tu página web: Detecta errores y mejora el SEO
Puedes utilizar herramientas de análisis de páginas web para comprobar si las tags HTML se están utilizando correctamente y para detectar otros problemas que puedan afectar al rendimiento de tu sitio web. Una de las herramientas más populares es la herramienta de Auditoría del sitio que te permite detectar errores de SEO y HTML.
Para utilizar la herramienta de Auditoría del sitio:
- Crea un proyecto para tu dominio en la herramienta.
- Selecciona la opción “Auditoría del sitio” en el panel de control de tu proyecto.
- Introduce tu dominio de destino y configura cualquier ajuste adicional.
- Selecciona “Iniciar auditoría del sitio”.
- Una vez que la auditoría se complete revisa el informe general de Auditoría del sitio para ver cualquier problema.
- Selecciona la pestaña “Problemas” para obtener una vista más detallada de cualquier incidencia de HTML.
Conclusión: Las tags HTML son tu mejor aliado
Entender las tags HTML es un paso fundamental para cualquier persona que quiera crear páginas web.
Esta “hoja de trucos” te permitirá comprender mejor cómo funcionan las tags HTML y te ayudará a crear páginas web bien estructuradas funcionales y atractivas.
Recuerda que este es solo un resumen de las tags HTML más comunes.
Existe una gran variedad de otras tags HTML disponibles para diferentes propósitos.
Te recomiendo que explores la documentación oficial de HTML para obtener más información sobre cada tag y sus usos.